<template>
    <view>
        <z-paging ref="dataPagingRef" :fixed="true" use-virtual-list :force-close-inner-list="true" cell-height-mode="dynamic" @virtualListChange="virtualListChange" @query="loadData" :auto="true">
            <template #top>
                <view class="snowy-z-paging-item">
                    <snowy-search placeholder="请输入设备类型" v-model="searchFormData.type" @confirm="$refs.dataPagingRef.reload()" @clear="$refs.dataPagingRef.reload()" :seniorEnable="true" @seniorSearch="$refs.searchRef.open()"></snowy-search>
                </view>
                <!-- 状态筛选栏 -->
                <view class="status-filter-container">
                    <scroll-view class="status-filter-scroll" scroll-x="true" show-scrollbar="false">
                        <view class="status-filter-list">
                            <view 
                                class="status-filter-item" 
                                :class="{ active: currentStatus === '已批准' }"
                                @tap="changeStatus('已批准')"
                            >
                                进行中
                            </view>
                            <view 
                                class="status-filter-item" 
                                :class="{ active: currentStatus === '已完成' }"
                                @tap="changeStatus('已完成')"
                            >
                                已完成
                            </view>
                            <view
                                class="status-filter-item"
                                :class="{ active: currentStatus === 'all' }"
                                @tap="changeStatus('all')"
                            >
                              全部预约
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <search ref="searchRef" :searchFormData="searchFormData" @confirm="$refs.dataPagingRef.reload()"></search>
            </template>
            <view class="snowy-shadow snowy-z-paging-item snowy-padding snowy-hover" v-for="(item, index) in userReservationData" :key="index" @tap="moreTapItem(item, index)">
                <view class="device-header">
                    <view class="divice-name">{{item.reservationDate}} {{item.timeSlot}}</view>
                    <view class="device-status" :class="getStatusClass(item.status)">{{ item.status }}</view>
                </view>
                <uni-row class="item-uni-row">
                  <uni-col :span="2" class="icon-userName">
                    <uni-icons size="18" type="person" color="#5677fc"></uni-icons>
                  </uni-col>
                  <uni-col :span="10">
                    <view class="snowy-sub-title">预约用户名称</view>
                  </uni-col>
                  <uni-col :span="12">
                    <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.userName }} </view>
                  </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2" class="icon-type">
                        <uni-icons size="18" type="settings" color="#9b51e0"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">设备类型</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.type }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2" class="icon-name">
                        <uni-icons size="18" type="info" color="#2d9cdb"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">设备名称</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.deviceName }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2" class="icon-date">
                        <uni-icons size="18" type="calendar" color="#f2994a"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">预约日期</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.reservationDate }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2" class="icon-detail">
                        <uni-icons size="18" type="calendar" color="#828282"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">预约时间段</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.timeSlot }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2" class="icon-usage">
                        <uni-icons size="18" type="flag" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">使用目的</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.purpose }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                    <uni-col :span="2" class="icon-remark">
                        <uni-icons size="18" type="chat" color="#5677fc"></uni-icons>
                    </uni-col>
                    <uni-col :span="10">
                        <view class="snowy-sub-title">备注</view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.remark }} </view>
                    </uni-col>
                </uni-row>
                <uni-row class="item-uni-row">
                  <uni-col :span="2" class="icon-remark">
                    <uni-icons size="18" type="info" color="#5677fc"></uni-icons>
                  </uni-col>
                  <uni-col :span="10">
                    <view class="snowy-sub-title">状态</view>
                  </uni-col>
                  <uni-col :span="12">
                    <view class="snowy-text-right snowy-text-bold snowy-text-ellipsis"> {{ item.status }} </view>
                  </uni-col>
                </uni-row>
            </view>
        </z-paging>
        <snowy-float-btn v-if="$snowy.hasPerm('mobileUserReservationAdd')" @click="add"></snowy-float-btn>
        <more ref="moreRef" @handleOk="loadData(0, 10)"></more>
    </view>
</template>

<script setup name="userReservation">
    import search from './search.vue'
    import userReservationApi from '@/api/biz/user-reservation-api'
    import more from './more.vue'
    import { onLoad, onShow, onReady, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
    import { reactive, ref, getCurrentInstance, nextTick } from "vue"

    const { proxy } = getCurrentInstance()
    const dataPagingRef = ref()
    const searchFormData = ref({})
    const userReservationData = ref([])
    const currentStatus = ref('已批准') // 当前选中的状态
    
    const virtualListChange = (vList) => {
        userReservationData.value = vList
    }

    // 状态筛选
    const changeStatus = (status) => {
        currentStatus.value = status
        dataPagingRef.value.reload()
    }

    // 获取状态样式类
    const getStatusClass = (status) => {
        switch(status) {
            case '已批准':
                return 'approved'
            case '已完成':
                return 'completed'
            case '待审批':
                return 'pending'
            case '已拒绝':
                return 'rejected'
            default:
                return ''
        }
    }

    const loadData = async (pageNo, pageSize) => {
        const parameter = {
            current: pageNo,
            size: pageSize
        }
        Object.assign(parameter, searchFormData.value)
        
        // 根据选中的状态筛选数据
        if (currentStatus.value !== 'all') {
            parameter.status = currentStatus.value
        }
        
        const data = await userReservationApi.userReservationPage(parameter)
        dataPagingRef.value.complete(data?.records)
    }
    onShow(() => {
        uni.$once('formBack', (data) => {
            nextTick(() => {
            	dataPagingRef.value.reload()
            })
        })
    })
    // 新增
    const add = () => {
        uni.navigateTo({
            url: '/pages/biz/userReservation/form'
        })
    }
    // 更多操作
    const moreRef = ref()
    const moreTapItem = (item, index) => {
        moreRef.value.open(item)
    }
</script>

<style lang="scss" scoped>
@import '@/static/scss/index.scss';

.snowy-z-paging-item {
  position: relative;
  margin: 10rpx 5%;
  border-radius: 16rpx;
  overflow: hidden;
  background: linear-gradient(to bottom right, #ffffff, #f0f8ff);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s;

  &.snowy-hover {
    &:active {
      transform: scale(0.98);
      background: linear-gradient(to bottom right, #ffffff, #e6f0ff);
    }
  }
}

.snowy-padding {
  padding: 24rpx;
}

.item-uni-row {
  padding: 14rpx 0 !important;
  border-bottom: 1rpx solid rgba(86, 119, 252, 0.1);

  &:last-child {
    border-bottom: none;
  }

  .uni-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36rpx;
    height: 36rpx;
    background-color: rgba(86, 119, 252, 0.1);
    border-radius: 50%;
    padding: 6rpx;
  }
}

.device-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 2rpx solid rgba(86, 119, 252, 0.2);
}

.device-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.device-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;

  &.online {
    background-color: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    border: 1rpx solid rgba(39, 174, 96, 0.3);
  }

  &.offline {
    background-color: rgba(235, 87, 87, 0.1);
    color: #eb5757;
    border: 1rpx solid rgba(235, 87, 87, 0.3);
  }

  &.maintenance {
    background-color: rgba(242, 153, 74, 0.1);
    color: #f2994a;
    border: 1rpx solid rgba(242, 153, 74, 0.3);
  }
}

.snowy-sub-title {
  font-size: 24rpx;
  color: #666;
}

.snowy-text-right {
  text-align: right;
  font-size: 26rpx;

  &.snowy-text-bold {
    font-weight: 500;
    color: #333;
  }

  &.snowy-text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Custom icons for different field types */
.icon-usage .uni-icons {
  background-color: rgba(155, 81, 224, 0.1);
  color: #9b51e0;
}

.icon-type .uni-icons {
  background-color: rgba(45, 156, 219, 0.1);
  color: #2d9cdb;
}

.icon-name .uni-icons {
  background-color: rgba(39, 174, 96, 0.1);
  color: #27ae60;
}

.icon-userName .uni-icons {
  background-color: rgba(242, 153, 74, 0.1);
  color: #f2994a;
}

.icon-date .uni-icons {
  background-color: rgba(130, 130, 130, 0.1);
  color: #828282;
}
.icon-detail .uni-icons {
  background-color: rgba(242, 153, 74, 0.1);
  color: #f2994a;
}
.icon-remark .uni-icons {
  background-color: rgba(39, 174, 96, 0.1);
  color: #27ae60;
}


/* Add a footer to the card */
.device-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 16rpx;
  margin-top: 16rpx;
  border-top: 1rpx solid rgba(86, 119, 252, 0.1);
}

.view-more {
  font-size: 24rpx;
  color: #5677fc;
  padding: 6rpx 12rpx;
}
/* 去掉搜索栏的圆滑*/
.snowy-search {
  border-radius: 0;
}

/* 状态筛选栏样式 */
.status-filter-container {
    background: #fff;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
}

.status-filter-scroll {
    white-space: nowrap;
}

.status-filter-list {
    display: flex;
    padding: 0 30rpx;
    gap: 20rpx;
}

.status-filter-item {
    flex-shrink: 0;
    padding: 16rpx 32rpx;
    background: #f8f9fa;
    border-radius: 40rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.3s;
    border: 2rpx solid transparent;
    
    &.active {
        background: linear-gradient(135deg, #5677fc, #7b68ee);
        color: #fff;
        border-color: #5677fc;
        box-shadow: 0 4rpx 12rpx rgba(86, 119, 252, 0.3);
    }
}

/* 状态样式 */
.approved {
    color: #27ae60 !important;
}

.completed {
    color: #2d9cdb !important;
}

.pending {
    color: #f2994a !important;
}

.rejected {
    color: #eb5757 !important;
}

.device-status {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;

  &.approved {
    background-color: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    border: 1rpx solid rgba(39, 174, 96, 0.3);
  }

  &.completed {
    background-color: rgba(45, 156, 219, 0.1);
    color: #2d9cdb;
    border: 1rpx solid rgba(45, 156, 219, 0.3);
  }

  &.pending {
    background-color: rgba(242, 153, 74, 0.1);
    color: #f2994a;
    border: 1rpx solid rgba(242, 153, 74, 0.3);
  }

  &.rejected {
    background-color: rgba(235, 87, 87, 0.1);
    color: #eb5757;
    border: 1rpx solid rgba(235, 87, 87, 0.3);
  }
}
</style>
